<template>
  <div>
    <div>
      <el-card>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: homePath }">设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>OPT设备数据-{{ name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
      <el-card class="m-t">
        <OPTOverView :deviceId="deviceId"
                     :deviceName="name"></OPTOverView>
      </el-card>
      <el-row style="margin:20px">
        <el-tabs @tab-click="tabsChangeFun"
                 v-model="tabsName">
          <el-tab-pane :lazy="true"
                       name="1"
                       label="时段数据分析"
                       style="padding: 20px">
            <el-form :model="searchForm">
              <el-row :gutter="20"
                      class="topLayout"
                      type="flex"
                      justify="start">
                <div class="inline">
                  <el-button class="firstBtn"
                             :class="index == 0 ? 'selected' : ''"
                             type="default"
                             @click="changeTab(0)"
                             size="mini">近一天</el-button>
                  <el-button class="lastBtn"
                             :class="index == 1 ? 'selected' : ''"
                             type="default"
                             @click="changeTab(1)"
                             size="mini">近一周</el-button>
                  <!--<el-button type="default"
                             :class="index == 1 ? 'selected' : ''"
                             @click="changeTab(1)"
                             size="mini">近一周</el-button>
                  <el-button class="lastBtn"
                             :class="index == 2 ? 'selected' : ''"
                             type="default"
                             @click="changeTab(2)"
                             size="mini">近一月</el-button>-->
                </div>
                <div class="inline"
                     style="min-width:210px">
                  <el-form-item label="开始日期"
                                style="width:100%">
                    <el-date-picker :picker-options="pickerDateBegin"
                                    class="datePicker"
                                    size="mini"
                                    v-model="searchForm.start"
                                    type="date"
                                    value-format="timestamp"
                                    placeholder="开始日期"></el-date-picker>
                  </el-form-item>
                </div>
                <div class="inline"
                     style="min-width:210px">
                  <el-form-item label="结束日期"
                                style="width:100%">
                    <el-date-picker :picker-options="pickerDateEnd"
                                    class="datePicker"
                                    size="mini"
                                    v-model="searchForm.end"
                                    type="date"
                                    value-format="timestamp"
                                    placeholder="结束日期"></el-date-picker>
                  </el-form-item>
                </div>
                <div class="inline">
                  <el-button type="primary"
                             icon="el-icon-search"
                             class="m-l"
                             @click="initData()"
                             size="mini">搜索</el-button>
                </div>
              </el-row>
            </el-form>

            <el-card class="m-t">
              <el-row style="
                  background: #fff;
                  padding: 16px 16px 0;
                  margin-bottom: 32px;
                ">
                <el-col :span="12"
                        v-if="temperatureChartData.length>0">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">温度(℃)</span>
                  </div>
                  <line-chart ref="chart1_1"
                              :chart-data="temperatureChartData"
                              color="#FF9D2D"
                              headTitle="温度(℃)"
                              :chart-time="temperatureTimeData"
                              head-title="" />
                </el-col>
                <el-col :span="12"
                        v-if="humilityChartData.length>0">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">湿度(%)</span>
                  </div>
                  <line-chart ref="chart1_2"
                              :chart-data="humilityChartData"
                              color="#FF9D2D"
                              headTitle="湿度(%)"
                              :chart-time="humilityTimeData"
                              head-title="" />
                </el-col>

                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">照度(lx)</span>
                  </div>
                  <line-chart ref="chart1_1"
                              :chart-data="luxChartData"
                              color="#FF9D2D"
                              headTitle="照度(Lux)"
                              :chart-time="luxTimeData"
                              head-title="" />
                </el-col>

                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">色温(K)</span>
                  </div>
                  <line-chart-cct ref="chart1_2"
                                  :chart-data="cctChartData"
                                  :chart-time="cctTimeData"
                                  color="#FB4652"
                                  head-title="色温(K)" />
                </el-col>
                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">生理等效照度EDI(lx)</span>
                  </div>
                  <line-chart ref="chart1_3"
                              :chart-data="ediChartData"
                              :chart-time="ediTimeData"
                              head-title="生理等效照度EDI(lx)"
                              color="#1B65F9" />
                </el-col>

                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">节律刺激因子CS</span>
                  </div>
                  <line-chart ref="chart1_4"
                              :chart-data="csChartData"
                              :chart-time="csTimeData"
                              color="#36D3EC"
                              head-title="节律刺激因子CS" />
                </el-col>
              </el-row>
              <el-row>
                <histogram ref="chart1_5"
                           :chart-data="histogramChartData"
                           :chart-time="histogramTimeData"
                           head-title="设备在线率"
                           min="0"
                           max="100"
                           :interval="number(5)"
                           :name="name" />
              </el-row>
            </el-card>

            <!-- <el-card class="m-t">
              <el-row style="
                  background: #fff;
                  padding: 16px 16px 0;
                  margin-bottom: 32px;
                ">
                <line-chart :chart-data="EMLData"
                            :chart-time="TEMPERATURETimeData"
                            head-title="非视觉参数(EML)"
                            :y-max="number(60)"
                            :interval="number(10)" />
              </el-row>
            </el-card> -->
            <el-card class="m-t">
              <el-row style="margin: 20px">
                <el-button type="default" size="mini" icon="el-icon-download" @click="downloadData">下载数据</el-button>
                <el-button type="default" size="mini" icon="el-icon-s-data" @click="adjust()">数据校准</el-button>
              </el-row>
              <el-table ref="multipleTable"
                        max-height="250"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column type="index"
                                 label="编号"
                                 min-width="60"
                                 align="center"/>
                <el-table-column prop="ts"
                                 label="日期"
                                 :formatter="dateFormat"
                                 min-width="150"
                                 sortable />
                <el-table-column prop="val.OPT_TEMPERATURE"
                                 label="温度(℃)"
                                 min-width="140"
                                 sortable
                                 v-if="temperatureChartData.length>0">
                  <template scope="{row}">
                    {{row.val.OPT_TEMPERATURE.toFixed(1)}}
                  </template>
                </el-table-column>
                <el-table-column prop="val.OPT_HUMILITY"
                                 label="湿度(%)"
                                 min-width="140"
                                 sortable
                                 v-if="humilityChartData.length>0">
                  <template scope="{row}">
                    {{row.val.OPT_HUMILITY.toFixed(1)}}
                  </template>
                </el-table-column>
                <el-table-column prop="val.COR_OPT_LUX"
                                 label="照度(lx)"
                                 sortable
                                 width="180">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.COR_OPT_LUX&&!isNaN(row.val.COR_OPT_LUX)?row.val.COR_OPT_LUX.toFixed(1):'0'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="val.CCT"
                                 label="色温(K)"
                                 sortable
                                 width="180">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.CCT&&!isNaN(row.val.CCT)&&(row.val.CCT>2500&&row.val.CCT&lt;10000)?row.val.CCT.toFixed(0):'-'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="val.EML"
                                 label="EML"
                                 sortable
                                 width="180">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.EML&&!isNaN(row.val.EML)?row.val.EML.toFixed(1):'0'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="val.EDI"
                                 label="EDI(lx)"
                                 sortable
                                 width="180">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.EDI&&!isNaN(row.val.EDI)?row.val.EDI.toFixed(1):'0'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="val.CLA"
                                 sortable
                                 width="180"
                                 :render-header="renderHeader">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.CLA&&!isNaN(row.val.CLA)?row.val.CLA.toFixed(1):'0'}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="val.CS"
                                 label="CS"
                                 sortable
                                 width="180">
                  <template scope="{row}">
                    <span>{{row&&row.val&&row.val.CS&&!isNaN(row.val.CS)?row.val.CS.toFixed(3):'0'}}</span>
                  </template>
                </el-table-column>
              </el-table>
              <!-- <el-pagination :current-page="CurrentPage"
                             :page-sizes="[100, 200, 300, 400]"
                             :page-size="100"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="400"
                             style="margin-top: 10px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange" /> -->
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="时刻数据分析"
                       name="2"
                       :lazy="true">
            <el-form :model="searchForm2"
                     label-position="left">
              <div class="panel2-inline"
                   style="min-width:210px">
                <span class="search-label">选择时间:</span>
                <el-date-picker v-model="searchForm2.date"
                                type="datetime"
                                size="mini"
                                placeholder="选择日期时间">
                </el-date-picker>
              </div>
              <div class="panel2-inline">
                <el-button type="primary"
                           icon="el-icon-search"
                           class="m-l"
                           @click="initData()"
                           size="mini">搜索</el-button>
              </div>
            </el-form>
            <el-card class="m-t">
              <el-row style="padding: 20px 50px">
                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">色品</span>
                  </div>
                  <Spectrogram ref="chart2_1"
                               :chartData="spectogramData" />
                </el-col>
                <el-col :span="12">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">显色指数</span>
                  </div>
                  <color-index ref="chart2_3"
                               :chartData="colorIndex"></color-index>
                </el-col>
                <el-col :span="24">
                  <div class="chart-title-box">
                    <img src="../../../assets/images/arrow.png"
                         style="width:18px" />
                    <span class="chart-title">光谱分布</span>
                  </div>
                  <line-chart-color ref="chart2_2"
                                    :chart-data="relativeSpectrum"
                                    color="#36D3EC"
                                    head-title="" />
                </el-col>
              </el-row>

              <el-row class="table-style">
                <el-col :span="4"
                        class="col-1">评价指标</el-col>
                <el-col :span="8">
                  <el-row class="zebra-stripe"
                          :gutter="2">
                    <el-col class="n1">
                      <el-col :span="12">温度℃
                      </el-col>
                      <el-col :span="12">
                        {{optAll&&optAll.OPT_TEMPERATURE&&!isNaN(optAll.OPT_TEMPERATURE)?(optAll.OPT_TEMPERATURE).toFixed(1):'NC'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">湿度%
                      </el-col>
                      <el-col :span="12">
                        {{optAll&&optAll.OPT_HUMILITY&&!isNaN(optAll.OPT_HUMILITY)?(optAll.OPT_HUMILITY).toFixed(1):'NC'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">照度（lx）
                      </el-col>
                      <el-col :span="12">
                        {{optAll&&optAll.OPT_LUX&&!isNaN(optAll.OPT_LUX)?(optAll.OPT_LUX).toFixed(1):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">三刺激值X
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.OPT_X&&!isNaN(optAll.OPT_X)?(optAll.OPT_X).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">三刺激值Y
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.OPT_Y&&!isNaN(optAll.OPT_Y)?(optAll.OPT_Y).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">三刺激值Z
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.OPT_Z&&!isNaN(optAll.OPT_Z)?(optAll.OPT_Z).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">色品坐标x
                      </el-col>
                      <el-col :span="12">
                        {{optAll&&optAll.D_XY&&optAll.D_XY[0]&&!isNaN(optAll.D_XY[0])?(optAll.D_XY[0]).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">色品坐标y
                      </el-col>
                      <el-col :span="12">
                        {{optAll&&optAll.D_XY&&optAll.D_XY[1]&&!isNaN(optAll.D_XY[1])?(optAll.D_XY[1]).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">相关色温 (K)
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.CCT&&!isNaN(optAll.CCT)?(optAll.CCT).toFixed(0):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">色偏差Duv
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.DUV&&!isNaN(optAll.DUV)?(optAll.DUV).toFixed(2):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">EML转化系数
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.EML_R&&!isNaN(optAll.EML_R)?(optAll.EML_R).toFixed(3):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">EML
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.EML&&!isNaN(optAll.EML)?(optAll.EML).toFixed(1):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">EDI (lx)
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.EDI&&!isNaN(optAll.EDI)?(optAll.EDI).toFixed(1):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">CLA
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.CLA&&!isNaN(optAll.CLA)?(optAll.CLA).toFixed(1):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">CS
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.CS&&!isNaN(optAll.CS)?(optAll.CS).toFixed(3):'0'}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">一般显色指数Ra
                      </el-col>
                      <el-col :span="12">{{optAll&&optAll.RA&&!isNaN(optAll.RA)?(optAll.RA).toFixed(1):'0'}}
                      </el-col>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="4"
                        class="col-1">显色指数</el-col>
                <el-col :span="8">
                  <el-row class="zebra-stripe">
                    <el-col class="n1">
                      <el-col :span="12">R1
                      </el-col>
                      <el-col :span="12">{{colorIndex[0]?colorIndex[0]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R2
                      </el-col>
                      <el-col :span="12">{{colorIndex[1]?colorIndex[1]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R3
                      </el-col>
                      <el-col :span="12">{{colorIndex[2]?colorIndex[2]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R4
                      </el-col>
                      <el-col :span="12">{{colorIndex[3]?colorIndex[3]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R5
                      </el-col>
                      <el-col :span="12">{{colorIndex[4]?colorIndex[4]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R6
                      </el-col>
                      <el-col :span="12">{{colorIndex[5]?colorIndex[5]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R7
                      </el-col>
                      <el-col :span="12">{{colorIndex[6]?colorIndex[6]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R8
                      </el-col>
                      <el-col :span="12">{{colorIndex[7]?colorIndex[7]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R9
                      </el-col>
                      <el-col :span="12">{{colorIndex[8]?colorIndex[8]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R10
                      </el-col>
                      <el-col :span="12">{{colorIndex[9]?colorIndex[9]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R11
                      </el-col>
                      <el-col :span="12">{{colorIndex[10]?colorIndex[10]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-col :span="12">R12
                      </el-col>
                      <el-col :span="12">{{colorIndex[11]?colorIndex[11]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n1">
                      <el-col :span="12">R13
                      </el-col>
                      <el-col :span="12">{{colorIndex[12]?colorIndex[12]:"-"}}
                      </el-col>
                    </el-col>
                    <el-col class="n2">
                      <el-row>
                        <el-col :span="12">R14
                        </el-col>
                        <el-col :span="12">{{colorIndex[13]?colorIndex[13]:"-"}}
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col class="n1">
                      <el-row>
                        <el-col :span="12">R15
                        </el-col>
                        <el-col :span="12">{{colorIndex[14]?colorIndex[14]:"-"}}
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col class="n2">
                      <el-row>
                        <el-col :span="12"
                                style="height:39px"></el-col>
                        <el-col :span="12"
                                style="height:39px"></el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
              <div class="chart-title-box">
                <img src="../../../assets/images/arrow.png"
                     style="width:18px" />
                <span class="chart-title"
                      style="font-size:16px;margin:15px 0 15px 5px;">优化计算</span>
              </div>

              <div class="bottom-label">非视觉评价指标：</div>
              <el-row type="flex"
                      justify="start"
                      style="align-items:center">
                <div class="bottom">
                  <div class="button-group">
                    <span :class="envaluationKPI == 'EML'?'active-button':'button'"
                          size="small"
                          @click="changeEnvaluationKPIFun('EML')">EML</span>
                    <span :class="envaluationKPI == 'EDI'?'active-button':'button'"
                          @click="changeEnvaluationKPIFun('EDI')">EDI</span>
                    <span :class="envaluationKPI == 'CS'?'active-button':'button'"
                          @click="changeEnvaluationKPIFun('CS')">CS</span>
                  </div>
                </div>
                <div>
                  <div class="tips"
                       v-show="envaluationKPI == 'EML'">
                    指标说明：至少75%的工作区域在9：00-13：00达到200EML。更多信息请见：Circadian lighting design | WELL Standard
                    (wellcertified.com)
                  </div>
                  <div class="tips"
                       v-show="envaluationKPI == 'EDI'">
                    指标说明：公共建筑人员长期工作场所主要视线方向上1.2m处的生理等效照度不低于150lx，得3分；生理等效照度不低于200lx，得5分。——来源:《健康建筑评价标准》T/ASC 02-2021
                  </div>
                  <div class="tips"
                       v-show="envaluationKPI == 'CS'">
                    指标说明：在一天的早间时段接受CS值不低于0.3的光照至少1小时。——来源：M.G. FiGueiro, K. GonzALes, D.A.D. PeDLer, Designing with
                    circadian stimulus, 8, 2016, pp. 30–34.
                  </div>
                </div>
              </el-row>
              <div class="bottom">
                <div class="flex">
                  <span class="label"
                        v-show="envaluationKPI != 'CS'">目标值</span>
                  <span class="label"
                        v-show="envaluationKPI == 'CS'">垂直照度</span>
                  <el-input v-model="targetValue"
                            style="display:inline-block;"
                            size="small"></el-input>
                </div>
                <div>
                  <el-button type="primary"
                             size="small"
                             @click="computeFun">计算</el-button>
                </div>
                <div class="flex">
                  <span class="label"
                        v-show="envaluationKPI != 'CS'">垂直照度&nbsp;{{vertical}}</span>
                  <span class="label"
                        v-show="envaluationKPI == 'CS'">CS值&nbsp;{{vertical}}</span>
                </div>
                <div class="tips"
                     v-show="envaluationKPI != 'CS'">输入目标值，点击计算，可得到当前光谱下达到要求所需的垂直照度。</div>
                <div class="tips"
                     v-show="envaluationKPI == 'CS'">输入照度值，点击计算，可得到当前光谱下输入值对应的CS。</div>

              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
    <download :show-dialog="downloadShowDialog" @downloadVisible="downloadVisible" />
    <adjust :show-dialog="adjustShowDialog" :showTemperature="temperatureChartData.length>0?true:false" :showHumility="humilityChartData.length>0?true:false" @adjustVisible="adjustVisible" @initData="initData"/>
  </div>
</template>

<script>
import LineChart from "./chart/LineChartNew";
import LineChartCct from "./chart/LineChartNewCct";
import LineChartColor from "./chart/LineChartColor";
import BarChart from "./chart/BarChart";
import Histogram from "./chart/Histogram";
import Spectrogram from "./chart/Spectrogram";
import bigDataLineChart from "./chart/bigDataLineChart";
import colorIndex from "./chart/colorIndex";
import { getData, online, getFull } from "@/api/deviceManage";
import { formatDate } from "@/utils/utils";
import download from "@/views/deviceManage/components/download";
import adjust from "@/views/deviceManage/components/optAdjust";
import { cal_lux, cal_data } from "@/api/OPT"
import OPTOverView from "./OPTOverView";
export default {
  name: "OPTViewData",
  components: {
    LineChart,
    LineChartCct,
    LineChartColor,
    Histogram,
    Spectrogram,
    bigDataLineChart,
    BarChart,
    colorIndex,
    download,
    adjust,
    OPTOverView
  },
  data() {
    return {
      pickerDateBegin: {
        disabledDate: (time) => {
          let endDateVal = new Date(this.searchForm.end);
          if (endDateVal) {
            return time.getTime() > endDateVal - 3600 * 1000 * 24 || time.getTime() < endDateVal - 3600 * 1000 * 24 * 30;
          } else {
            return time.getTime() > new Date().getTime() - 8.64e7;
          }
        }
      },
      dateFormat(row) {
        return formatDate(new Date(row.ts));
      },
      pickerDateEnd: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      index: 0,
      TEMPERATURETimeData: [
        "12-28 00:00",
        "12-28 02:00",
        "12-28 04:00",
        "12-28 06:00",
        "12-28 08:00",
        "12-28 10:00",
        "12-28 12:00",
        "12-28 14:00",
      ],
      LUXData: [25.6, 21, 23.8, 24.5, 22.6, 23.5, 24.9, 27.4],
      KData: [25.6, 21, 23.8, 24.5, 22.6, 23.5, 24.9, 27.4],
      EMLData: [2.6, 21, 23.8, 24.5, 40.6, 50.5, 15.9, 27.4],
      HChartData: [90, 52, 90, 80, 90, 70, 90, 90, 52, 90, 80, 90],
      timeValue: "",
      tableData: [],
      tableData1: [],
      CurrentPage: 1,
      searchForm: {
        start: "",
        end: "",
      },
      homePath: "/deviceManage",
      deviceId: "",
      name: "",
      temperatureChartData: [],
      temperatureTimeData: [],
      humilityChartData: [],
      humilityTimeData: [],
      luxChartData: [],
      luxTimeData: [],
      cctChartData: [],
      cctTimeData: [],
      ediChartData: [],
      ediTimeData: [],
      csChartData: [],
      csTimeData: [],
      histogramChartData: [],
      histogramTimeData: [],
      downloadShowDialog: false,
      adjustShowDialog: false,
      tabsName: "1",
      targetValue: "",
      vertical: "",
      envaluationKPI: "EML",
      spectogramData: [],
      relativeSpectrum: [],
      colorIndex: [],
      searchForm2: {
        date: null
      },
      optAll: {}
    };
  },
  created() {
    this.deviceId = this.$route.query.deviceId;
    this.name = this.$route.query.name;
    this.page = this.$route.query.page;
    this.search = this.$route.query.search;
    let platformId = this.$route.query.platformId;
    if (platformId) {
      this.homePath = ``;
    } else {
      this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`;
    }
    this.searchForm2.date = new Date();

  },
  mounted() {
    this.changeTab(0);
  },
  methods: {
    renderHeader(h, { column }) {
      return h(
        'span',
        [
          h('span', "CL"),
          h('sub', "A")
        ])
    },
    getDeviceData(type) {
      let params = {
        deviceId: this.deviceId,
        type: type,
        start: this.searchForm.start,
        end: this.searchForm.end
      }
      params.type = type;
      getData(params).then(res => {
        let that = this;
        let data = res.value;
        if (params.type == "CCT") {
          that.handleData(data.data, 2, "CCT").then(result => {
            let { xData, yData } = result;
            that.cctChartData = yData;
            that.cctTimeData = xData;
          })

          return;
        }
        that.handleData(data.data, 2).then(result => {
          let { xData, yData } = result;
          if (params.type == "OPT_TEMPERATURE") {
            that.temperatureChartData = yData;
            that.temperatureTimeData = xData;
          } else if (params.type == "OPT_HUMILITY") {
            that.humilityChartData = yData;
            that.humilityTimeData = xData;
          } else if (params.type == "COR_OPT_LUX") {
            that.luxChartData = yData;
            that.luxTimeData = xData;
          } else if (params.type == "CCT") {
            that.cctChartData = yData;
            that.cctTimeData = xData;
          } else if (params.type == "EML") {
            that.emlChartData = yData;
            that.emlTimeData = xData;
          } else if (params.type == "EDI") {
            that.ediChartData = yData;
            that.ediTimeData = xData;
          } else if (params.type == "CLA") {
            that.claChartData = yData;
            that.claTimeData = xData;
          } else if (params.type == "CS") {
            that.csChartData = yData;
            that.csTimeData = xData;
          }
        });

      })
    },
    getColorData(type) {
      /**
       * D_XY 色品坐标
       * OPT_ALL 评价指标
       * NORMALIZED_SPECTRUM 相对光谱
       * R_VECTOR 显色指数
       */
      let params = {
        deviceId: this.deviceId,
        type,
      }
      if (this.searchForm2.date) {
        params.ts = this.searchForm2.date.getTime();
      }
      cal_data(params).then(res => {
        if (type == "D_XY") {
          let data = res.value;
          if (!data) {
            return;
          }
          this.spectogramData = data.map(e => {
            if (!isNaN(e)) {
              return e.toFixed(2);
            } else {
              return 0;
            }
          });
        } else if (type == "NORMALIZED_SPECTRUM") {
          let data = res.value;
          if (!data) {
            return;
          }
          this.relativeSpectrum = data.map(e => {
            if (!isNaN(e)) {
              return e.toFixed(2);
            } else {
              return 0;
            }
          });
        } else if (type == "R_VECTOR") {
          let data = res.value;
          if (!data) {
            return;
          }
          this.colorIndex = data;
          this.colorIndex = data.map(e => {
            if (!isNaN(e)) {
              if (e > -100 && e < 100) {
                return e.toFixed(1);
              }
              return "-";
            }
            return "-";
          });
        } else if (type == "OPT_ALL") {
          this.optAll = res.value;
        }
      })
    },
    tabsChangeFun(e) {
      this.$nextTick(() => {
        if (e.name == 1) {
          this.$refs.chart1_1.resizeHandler();
          this.$refs.chart1_2.resizeHandler();
          this.$refs.chart1_3.resizeHandler();
          this.$refs.chart1_4.resizeHandler();
          this.$refs.chart1_5.resizeHandler();
        } else if (e.name == 2) {
          this.$refs.chart2_1.resizeHandler();
          this.$refs.chart2_2.resizeHandler();
          this.$refs.chart2_3.resizeHandler();
        }
      })

    },
    initData() {
      this.getDeviceData("OPT_TEMPERATURE");
      this.getDeviceData("OPT_HUMILITY");
      this.getDeviceData("COR_OPT_LUX");
      this.getDeviceData("CCT");
      //this.getDeviceData("EML");
      this.getDeviceData("EDI");
      //this.getDeviceData("CLA");
      this.getDeviceData("CS");
      this.getColorData("D_XY");
      this.getColorData("NORMALIZED_SPECTRUM");
      this.getColorData("R_VECTOR");
      this.getColorData("OPT_ALL");
      let onLineData = {
        deviceId: this.deviceId,
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      let that = this;
      online(onLineData).then(res => {
        let data = res.value;
        that.handleData(data.data, 2).then(result => {
          let { xData, yData } = result;
          that.histogramChartData = yData;
          that.histogramTimeData = xData;
        });
      });

      //表格
      let params = {
        deviceId: this.deviceId,
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getFull(params).then(res => {
        const data = res.value.data;
        if (data && data.length > 0) {
          this.tableData = data.reverse();
        }
      });
    },
    changeTab(num) {
      this.index = num;
      this.searchForm.end = new Date().getTime();
      if (num == 0) {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24;
      } else if (num == 1) {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 7;
      } else {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 30;
      }
      this.searchTime = [];
      this.initData();
    },
    number(val) {
      return Number(val);
    },
    handleData(data, scale, type = 'other') {
      return new Promise((resolve, reject) => {
        let xData = [];
        let yData = [];
        for (let i = 0; i < data.length; i++) {
          data[i].ts = formatDate(new Date(data[i].ts));
          if (data[i].val) {
            data[i].val = Number(data[i].val.toFixed(scale));
          } else {
            if (type == "CCT") {
              data[i].val = null;
            } else {
              data[i].val = 0;
            }
          }
          xData.push(data[i].ts.substring(5, 16));
          yData.push(data[i].val);
        }
        resolve({ xData, yData });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
    },
    downloadVisible(e) {
      this.downloadShowDialog = e;
    },
    adjustVisible(e) {
      this.adjustShowDialog = e;
    },
    downloadData() {
      this.downloadVisible(true);
      /*window.open(
        process.env.VUE_APP_BASE_IBEM_API +
          `/v2/device/data/import/download.csv?deviceId=` +
          this.deviceId +
          "&start=" +
          this.searchForm.start +
          "&end=" +
          this.searchForm.end
      );*/
    },
    adjust() {
      this.adjustVisible(true);
    },
    computeFun() {
      if (!this.targetValue) {

        return
      }
      let params = {
        deviceId: this.deviceId,
        type: this.envaluationKPI,
        targetVal: this.targetValue
      }
      if (this.searchForm2.date) {
        params.ts = this.searchForm2.date.getTime();
      }
      cal_lux(params).then(res => {
        if (res.value) {
          if (this.envaluationKPI == "CS") {
            this.vertical = (res.value).toFixed(2);
          } else {
            this.vertical = (res.value).toFixed(1);
          }
        } else {
          this.vertical = "";
        }

      })
    },
    changeEnvaluationKPIFun(value) {
      this.envaluationKPI = value;
      this.targetValue = "";
    }
  },
};
</script>
<style lang="scss">
.topLayout .el-form-item {
  margin-bottom: 0px;
}
.flex-box .el-form-item {
  margin-bottom: 0px;
}
</style>
<style>
.flex-box .el-form-item {
  margin-bottom: 0px;
}
</style>
<style  lang="scss" scoped>
/* .inline {
  max-width: 300px;
  display: flex;
  flex-direction: row;
  align-items: center;
} */

.timeCase {
  max-width: 300px;
  margin-left: 20px;
  padding: 20px;
}

/* .label {
  border-left: 5px solid #36b368;
  background-color: #fafafa;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 14px;
} */
.chart-title {
  margin-left: 10px;
  height: 21px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 21px;
  color: #282828;
  opacity: 1;
}
.chart-title-box {
  display: flex;
  justify-content: flex-start;
  vertical-align: middle;
  align-items: center;
  margin-top: 10px;
}
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.flex-box {
  align-items: center;
}

.firstBtn {
  border-radius: 20px 0 0 20px;
}

.lastBtn {
  border-radius: 0 20px 20px 0;
}

.btnGroup .el-button {
  margin-left: 2px;
}

.inline {
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.timeCase {
  max-width: 300px;
}

.selected {
  background-color: #1890ff;
  color: #fff;
}

.m-l {
  margin-left: 20px;
}

.datePicker {
  width: 140px;
}
.panel2-inline {
  display: inline-block;
}
.search-label {
  line-height: 28px;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 700;
}
.bottom-label {
  white-space: nowrap;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 21px;
  color: #282828;
  margin: 0px 5px 10px 0;
}
.bottom {
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .label {
    white-space: nowrap;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 21px;
    color: #282828;
    margin-right: 5px;
  }
  .button-group {
    min-width: 230px;
    .button {
      cursor: pointer;
      text-align: center;
      line-height: 24px;
      color: #707070;
      display: inline-block;
      width: 60px;
      height: 24px;
      border: 1px solid #707070;
      opacity: 1;
      border-radius: 4px;
      margin: 0 5px;
    }
    .active-button {
      cursor: pointer;
      text-align: center;
      line-height: 24px;
      color: #1a8bf8;
      display: inline-block;
      width: 60px;
      height: 24px;
      border: 1px solid #1a8bf8;
      opacity: 1;
      border-radius: 4px;
      margin: 0 5px;
    }
  }

  .flex {
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 10px 10px;
  }
}
.tips {
  font-size: 14px;
  font-family: Microsoft YaHei;
  // font-weight: 400;
  line-height: 19px;
  color: #8d8d8d;
  opacity: 1;
}
.table-style {
  width: 100%;
  height: 656px;
  text-align: center;
  box-sizing: border;
  margin: 10px 0;
  .col-1 {
    background-color: #edf0f5;
    height: 100%;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    opacity: 1;
    line-height: 615px;
    border: solid 1px #fff;
  }
  .zebra-stripe {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 19px;
    color: #333333;

    .n2 {
      line-height: 39px;
      background-color: #edf0f5;
      border: solid 1px #fff;
      :first-child {
        border-right: solid 2px #fff;
      }
    }
    .n1 {
      line-height: 39px;
      font-size: 13px;
      background-color: #e0e6ef;
      border: solid 1px #fff;
      :first-child {
        border-right: solid 2px #fff;
      }
    }
  }
}
</style>
